<template>
  <el-container>
    <div class="header">
      <div class="box1" style="width: 24%">
        <div>
          <span style="font-size: 13px">计划月份:</span>
          &nbsp;
          <el-date-picker v-model="planCode" type="month" style="width: 150px" :disabled-date="disabledDate"
            @change="dateChange"></el-date-picker>

        </div>
        <el-button style="margin-right: 15px" type="warning" size="medium" @click="upsearch">查询</el-button>
      </div>
    </div>

    <el-header style="display: none"></el-header>
    <el-main>
      <!-- 区域列表 -->
      <div class="right-panel-area">
        <div class="panel-area-header">
          <span> 片区维度分析 </span>

          <el-select v-model="search1.productSpec" placeholder="全部" style="width: 210px" filterable clearable
            @change="specChange">
            <el-option v-for="(item, index) in productSpecList" :key="index" :label="item.name"
              :value="item.name"></el-option>
          </el-select>
        </div>
        <div style="width: 100%;height: 400px;">
          <scTable ref="table1" :apiObj="apiObj1" :params="params" border :cell-style="cellStyle" stripe remoteSort
            remoteFilter hidePagination @selection-change="selectionChange">
            <el-table-column label="序号" prop="orderNO" align="center" width="50"></el-table-column>
            <el-table-column label="区域" prop="area" align="center"></el-table-column>
            <el-table-column label="计划配额（万）" prop="planNextQuota" align="center"></el-table-column>
            <el-table-column label="实际发货（万）" prop="stockOut" align="center"></el-table-column>
            <el-table-column label="剩余配额（万）" prop="residualQuota" align="center"></el-table-column>
            <el-table-column label="预计纯销（万）" prop="planNextSale" align="center"></el-table-column>
            <el-table-column label="直连纯销（万）" prop="sale" align="center"></el-table-column>
            <el-table-column label="纯销差值（万）" prop="saleDifference" align="center"></el-table-column>
            <el-table-column label="直连销售（万）" prop="stock" align="center"></el-table-column>
          </scTable>
        </div>
      </div>

      <!-- 品种列表 -->
      <div class="right-panel-breed">
        <div class="panel-breed-header">
          <span> 品种维度分析 </span>
          <el-select v-model="search2.area" placeholder="全国" style="width: 210px" filterable clearable
            @change="areaChange2">
            <el-option v-for="item in areaList" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div style="width: 100%;height: 400px;">
          <scTable ref="table2" :apiObj="apiObj2" :params="params" border hidePagination row-key="id"
            @selection-change="selectionChange">
            <el-table-column label="品类" prop="productType" width="110"></el-table-column>
            <el-table-column label="品种名称" prop="productSpec" align="center"></el-table-column>
            <el-table-column label="计划配额（万）" prop="planNextQuota" align="center"></el-table-column>
            <el-table-column label="实际发货（万）" prop="stockOut" align="center"></el-table-column>
            <el-table-column label="剩余配额（万）" prop="residualQuota" align="center"></el-table-column>
            <el-table-column label="预计纯销（万）" prop="planNextSale" align="center"></el-table-column>
            <el-table-column label="直连纯销（万）" prop="sale" align="center"></el-table-column>
            <el-table-column label="纯销差值（万）" prop="saleDifference" align="center"></el-table-column>
            <el-table-column label="直连销售（万）" prop="stock" align="center"></el-table-column>
          </scTable>
        </div>
      </div>

      <!-- 片区销售进度透视 -->
      <div class="right-panel-sale">
        <div class="panel-sale-header">
          <span> 片区销售进度透视 </span>
        </div>
        <div style="width: 100%;height: 400px;">
          <scTable ref="table3" :apiObj="apiObj3" :params="params" :cell-style="cellStyle" stripe remoteSort
            remoteFilter hidePagination @selection-change="selectionChange">
            <el-table-column label="序号" prop="orderNO" align="center" width="80"></el-table-column>
            <el-table-column label="区域" prop="area" align="center" width="90"></el-table-column>
            <el-table-column :label="`1-${planCode2 - 1 == 0 ? 12 : planCode2 - 1}月销售`" prop="thisYearSale"
              align="center"></el-table-column>
            <el-table-column label="年终任务（一标）" prop="totalTask" align="center"></el-table-column>
            <el-table-column label="一标考核进度（%）" prop="saleRate" align="center"></el-table-column>
            <el-table-column :label="`${planCode2}月配额`" prop="planNextQuota" align="center"></el-table-column>
            <el-table-column :label="`1-${planCode2}月合计`" prop="totalQuota" align="center"></el-table-column>
            <el-table-column label="进度（%）" prop="quotaRate" align="center"></el-table-column>
          </scTable>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'progressStatistics',
  data() {
    return {
      data: '',
      apiObj1: '',
      apiObj2: '',
      apiObj3: '',
      params: {
        // month: null //月份
        type: 1
      },
      search1: {
        // area: '', //选择的片区
        productSpec: '', //品种
        planCode: null //月份
      },
      search: {
        area: '', //选择的片区
        // productSpec: '', //品种
        planCode: null, //月份
        type: 1
      },
      search2: {
        area: '', //选择的片区
        // productSpec: '', //品种
        planCode: null,//月份
        type: 1
      },
      areaList: [], //片区列表
      productSpecList: [], //品种列表
      planCode: '', //计划年月
      planCode2: '', //计划年月(渲染)
      planCurMonth: '', //计划年月-当月月份
      planCode: ''
    }
  },
  created() {
    this.params.planCode = this.search.planCode = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))
    this.params.planCode = this.search2.planCode = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))
    this.params.planCode = this.search1.planCode = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))

    this.planCode = String(this.search.planCode)
    this.getProgress()
    this.getArea()
    this.getProductSpec()
    this.getDate()
  },
  mounted() {
    let date = new Date()
    this.planCurMonth = date
  },

  methods: {
    disabledDate(time) {
      // 获取今天的日期
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const tomorrow = new Date(today);
      tomorrow.setDate(today.getDate() + 1);
      // 时间转换为毫秒
      const timeInMilliseconds = new Date(time).getTime();
      const tomorrowInMilliseconds = tomorrow.getTime();
      // 禁用今天之后的日期
      return timeInMilliseconds >= tomorrowInMilliseconds;
    },
    dateChange(e) {
      if (!this.planCode) {
        // this.search.month = Number(this.$TOOL.dateFormat(Date.now(), 'yyyyMM'))
        this.planCode = String(this.search.planCode)
      } else {
        this.planCode = this.$TOOL.dateFormat(this.planCode, 'yyyyMM')
      }
      this.planCurMonth = e
    },
    getDate() {
      const currentDate = new Date()
      // 获取月份，月份是从0开始的，所以需要加1
      const currentMonth = currentDate.getMonth() + 1
      console.log('66666', currentMonth)
      if (currentMonth == 0) {
        this.planCode2 = 12
      } else {
        this.planCode2 = currentMonth
      }
    },
    //获取片区列表
    async getArea() {
      let res = await this.$API.plan.areas2.get()
      res.data.forEach((item) => {
        this.areaList.push(item)
      })
    },
    //获取品种列表
    async getProductSpec() {
      let res = await this.$API.plan.productList2.get()
      this.productSpecList = res.data
    },

    async getProgress() {
      this.apiObj1 = this.$API.plan.countAreaProgress //获取片区进度统计
      this.apiObj2 = this.$API.plan.countTypeProgress //  //获取品种进度统计
      this.apiObj3 = this.$API.plan.countOtxSaleProgress //  //获取销售进度统计
    },
    // 品种发生变化触发
    specChange(value) {
      if (!value) {
        this.search1.productSpec = ''
        this.upsearch()
      }
      this.search1.productSpec = value
      this.$nextTick(() => {
        this.$refs.table1.upData(this.search1)
      })
    },
    // 片区发生改变
    areaChange(value) {
      if (!value) {
        this.search.area = ''
        this.upsearch()
      } else {
        let obj = this.areaList.find((item) => item === value)
        this.search.area = obj
        this.$nextTick(() => {
          this.upsearch()
        })
      }
    },
    // 片区2发生改变
    areaChange2(value) {
      if (!value) {
        this.search.area = ''
        this.upsearch()
      } else {
        let obj = this.areaList.find((item) => item === value)
        this.search2.area = obj
        this.$nextTick(() => {
          this.$refs.table2.upData(this.search2)
        })
      }
    },
    //查询功能
    upsearch() {
      // 点击查询要渲染月份
      const dateObject = new Date(this.planCurMonth)
      // 获取月份，月份是从0开始的，所以需要加1
      const month = dateObject.getMonth() + 1
      if (month == 0) {
        this.planCode2 = 12
      } else {
        this.planCode2 = month
      }
      console.log(this.planCode2);
      this.search.planCode = Number(this.planCode)
      this.search2.planCode = Number(this.planCode)
      this.search1.planCode = Number(this.planCode)
      this.$refs.table1.upData(this.search1)
      this.$refs.table2.upData(this.search2)
      this.$refs.table3.upData(this.search)
    }
  }
}
</script>

<style scoped>
.header {
  width: 100%;
  height: 60px;
  /* background-color: red; */
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.header .box1 {
  /* background-color: red; */
  display: flex;
  justify-content: space-between;
  /* margin-top: 20px; */
}

.right-panel-main {
  margin: 40px;
}

.right-panel-search {
  margin: 30px;
}

.panel-area-header {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  height: 40px;
}

.panel-area-header span {
  font-size: 15px;
  font-weight: 600;
}

.panel-breed-header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  /* align-items: center; */
}

.panel-breed-header span {
  font-size: 15px;
  font-weight: 600;
}

.right-panel-breed {
  margin-top: 50px;
}

.panel-sale-header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  /* align-items: center; */
}

.panel-sale-header span {
  font-size: 15px;
  font-weight: 600;
}

.right-panel-sale {
  margin-top: 50px;
}
</style>